<!DOCTYPE html>
<html lang="ug">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>خېرىدار باشقۇرۇش</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1890FF',
secondary: '#666666'
},
borderRadius: {
'none': '0px',
'sm': '2px',
DEFAULT: '4px',
'md': '8px',
'lg': '12px',
'xl': '16px',
'2xl': '20px',
'3xl': '24px',
'full': '9999px',
'button': '4px'
}
}
}
}
</script>
<style>
@font-face {
font-family: 'UKIJ Ekran';
src: url('https://raw.githubusercontent.com/UyghurAI/Fonts/main/fonts/UKIJEkran.ttf') format('truetype');
}
body {
font-family: 'UKIJ Ekran', sans-serif;
direction: rtl;
}
.checkbox {
width: 16px;
height: 16px;
border: 2px solid #ddd;
border-radius: 4px;
cursor: pointer;
}
.checkbox:checked {
background-color: #1890FF;
border-color: #1890FF;
}
input:focus {
outline: none;
}
input::placeholder {
color: #999;
}
</style>
</head>
<body class="min-h-[1024px] bg-[#F0F2F5]">
<div class="flex h-screen">
<!-- Main Content -->
<div class="flex-1 overflow-hidden">
<!-- Header -->
<div class="bg-white h-[60px] px-6 flex items-center justify-between shadow-sm">
<div class="flex items-center gap-4">
<button class="!rounded-button px-4 py-2 bg-gray-100 hover:bg-gray-200 flex items-center gap-2">
<i class="fas fa-sync-alt"></i>
<span>يېڭىلاش</span>
</button>
<button class="!rounded-button px-4 py-2 bg-primary text-white hover:bg-blue-600 flex items-center gap-2">
<i class="fas fa-plus"></i>
<span>يېڭى قۇرۇش</span>
</button>
<button class="!rounded-button px-4 py-2 bg-gray-100 hover:bg-gray-200 flex items-center gap-2">
<i class="fas fa-filter"></i>
<span>سۈزۈش</span>
</button>
</div>
<div class="relative">
<input type="text" placeholder="خېرىدار ئىزدەش..." class="w-[300px] px-4 py-2 pr-10 border border-gray-200 rounded-button">
<i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
</div>
</div>
<!-- Table Content -->
<div class="p-6">
<div class="bg-white rounded-lg shadow-sm">
<div class="flex items-center justify-between p-4 border-b">
<div class="flex items-center gap-4">
<button class="!rounded-button px-4 py-2 bg-gray-100 hover:bg-gray-200 flex items-center gap-2">
<i class="fas fa-file-import"></i>
<span>كىرگۈزۈش</span>
</button>
<button class="!rounded-button px-4 py-2 bg-gray-100 hover:bg-gray-200 flex items-center gap-2">
<i class="fas fa-file-export"></i>
<span>چىقىرىش</span>
</button>
</div>
</div>
<table class="w-full">
<thead>
<tr class="border-b bg-gray-50">
<th class="p-4 text-right">
<input type="checkbox" class="checkbox">
</th>
<th class="p-4 text-right">خېرىدار نامى</th>
<th class="p-4 text-right">مەسئۇل كىشى</th>
<th class="p-4 text-right">تېلېفون نومۇرى</th>
<th class="p-4 text-right">ئادرېس</th>
<th class="p-4 text-right">ئىزاھات</th>
<th class="p-4 text-right">مەشغۇلات</th>
</tr>
</thead>
<tbody>
<tr class="border-b hover:bg-gray-50">
<td class="p-4">
<input type="checkbox" class="checkbox">
</td>
<td class="p-4">
<div class="flex items-center gap-3">
<img src="https://mastergo.com/ai/api/search-image?query=A professional business person portrait with neutral expression, simple light gray background, realistic style&width=40&height=40&orientation=squarish"
class="w-10 h-10 rounded-full object-cover" alt="خېرىدار رەسىمى">
<span>ئالىم تۇرسۇن</span>
</div>
</td>
<td class="p-4">ئەركىن ئابدۇللا</td>
<td class="p-4">17399544000</td>
<td class="p-4">ئۈرۈمچى شەھىرى</td>
<td class="p-4">مۇھىم خېرىدار</td>
<td class="p-4">
<div class="flex items-center gap-2">
<button class="!rounded-button p-2 text-blue-600 hover:bg-gray-100">
<i class="fas fa-edit"></i>
</button>
<button class="!rounded-button p-2 text-red-600 hover:bg-gray-100">
<i class="fas fa-trash"></i>
</button>
</div>
</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="p-4">
<input type="checkbox" class="checkbox">
</td>
<td class="p-4">
<div class="flex items-center gap-3">
<img src="https://mastergo.com/ai/api/search-image?query=A professional business person portrait with neutral expression, simple light gray background, realistic style&width=40&height=40&orientation=squarish"
class="w-10 h-10 rounded-full object-cover" alt="خېرىدار رەسىمى">
<span>دىلبەر مەمەت</span>
</div>
</td>
<td class="p-4">نۇر ئەخمەت</td>
<td class="p-4">15886679787</td>
<td class="p-4">قەشقەر شەھىرى</td>
<td class="p-4">يېڭى خېرىدار</td>
<td class="p-4">
<div class="flex items-center gap-2">
<button class="!rounded-button p-2 text-blue-600 hover:bg-gray-100">
<i class="fas fa-edit"></i>
</button>
<button class="!rounded-button p-2 text-red-600 hover:bg-gray-100">
<i class="fas fa-trash"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
<div class="flex items-center justify-between p-4 border-t">
<div class="text-gray-500">جەمئىي 2 خېرىدار</div>
<div class="flex items-center gap-2">
<button class="!rounded-button px-3 py-1 border hover:bg-gray-50">ئالدىنقى</button>
<button class="!rounded-button px-3 py-1 bg-primary text-white">1</button>
<button class="!rounded-button px-3 py-1 border hover:bg-gray-50">كېيىنكى</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
